{include file="common/head"}
<head>
	<style>
		.address{margin: 15px;}		
		.address div{word-wrap: break-word;}
		#top{background: #f60;}
		#bottom{background: #f7f7f7;}
		.row div{padding: 0px;margin: 0;}
		.add_check{display:none;color: #f60;font-size: 2rem;}

	</style>
</head>
<body style="background-image: linear-gradient(to bottom,#f60, #fff);">
	<div class="container-fluid" style="max-width: 800px;margin: 0 auto;height: 100%;">
	
	<div id="header"></div>
	<div id="foot"></div>
	
	<!-- 标题 -->
	<div id="top" class="row text-center" style="border: 0;color:white;">
		<div class="col-2 text-center">
			<span class="bi-chevron-left" onclick="history.back()"></span>
		</div>
		<div class="col-8 text-center"><c class="text-primary">我的地址</c></div>
		<div class="col-2 text-center">
			<a href="#"><span class="bi-app"></span> </a>
		</div>
	</div>

	<div style="height:55px;">
		
	</div>

	

	<div id="address_list" style="display: none;z-index: 21;background: #fff;border:1px solid #555;border-radius: 5px;">

		<div id="addresses">
			
		</div>
		<div>11</div>

	</div>
	<br/>
	<button type="button" class="form-control btn btn-primary" id="new_addr"><span class="bi-plus">New address</span></button>

	

	<div id="addr_editor" style="display: block;position: fixed;z-index: 22;background: #fff;left:15px;right:15px;top:100px;border:1px solid #ccc;min-height: 300px;border-radius: 5px;padding:15px;">
		<div class="row">
			<div class=" col-2 text-center" >
				<span class="bi-geo-alt-fill"></span>
				<c id="init_city"></c>
			</div>
			<div class=" col-8 text-primary text-center">地址编辑</div>
			<div class="col-2 text-center"><span class="bi-x-lg" id="edit_close"></span></div>
		</div>
		<div><input id="addr_id" value="" type="hidden" readonly /></div>
		<div>地址(Address)</div>
		<div>
				<textarea class="form-control" id="addr_text" value="" ></textarea>
		</div>
		<div>收货人(Name)</div>
		<div>
				<input type="text" class="form-control" id="addr_cont" value="" />
		</div>
		<div>收货人电话(Mobile/Tel)</div>
		<div>
				<input type="text" class="form-control" id="addr_mobile" value="" />
		</div>
		<br/>
		<div>
			<button type="button" class="btn btn-block btn-primary" id="addr_save">保存(Save)</button>
		</div>
			
	</div>

	<!-- 地址模板 -->
	<div id="add_module" style="display: none;">
		<div class="row address" style="border-bottom: 1px solid #ccc;margin:10px;">
			<div class="col-10">

			<div class="addr text-primary" addr_id="[addr_id]">[addr]</div>
				<div class="text-info">
					<span class="cont text-info">[cont]</span>
					<span class="mobi text-info">[mobi]</span>
				</div>
			</div>
			<div class="col-1 text-right">
				<span class="edit bi-pen"></span>
			</div>
			<div class="col-1 text-right">				
				<span class="remove bi-x-lg"></span>
			</div>
		</div>


	</div>	

    {include file="customer/google_map"}
    <input type="text" id="pos1" value='' style="display: none;" />
    <input type="text" id="pos2" value='' style="display: none;" />
    <div id="mask" style="opacity: 0.8;">mask layer</div>

	</div>
<script type="text/javascript">
	var a_find=1;
	$(document).ready(function(){
		
		//打开地址本
		
		var loadAddress = function(){
			$.post('/index.php/customer/my_address',{},function(res){
				var res =JSON.parse(res);
				if(res.code){
					var list = res.list;
					var add_module = $("#add_module").html();
					$("#address_list").html('');
					list.forEach(function(item,index,self){
						//console.log(item);
						new_html =add_module.replace('[addr_id]',item.id);
						new_html =new_html.replace('[addr]',item.address);
						new_html =new_html.replace('[cont]',item.contact);
						new_html =new_html.replace('[mobi]',item.mobile);
						$("#address_list").append(new_html);
					});
					$("#address_list").show();

				}else{
					layer.msg(res.msg);
				}
			})
		};		
		loadAddress();

		
		$(".bi-geo-alt-fill").on('click',function(){
			$("#container").show();

		})

		$("#addr_editor").hide();
		//打开新增
		$("#new_addr").on('click',function(){
			$("#addr_id").val('');
			$("#addr_text").val('');
			$("#addr_cont").val('');
			$("#addr_mobile").val('');
			$("#addr_editor").show();
			$("#mask").show();
		});

		//关闭
		$("#mask").on('click',function(){
			$("#addr_editor").hide();
			$("#mask").hide();
		});
		$("#edit_close").on('click',function(){$("#mask").trigger('click')});

		//保存地址
		$("#addr_save").on('click',function(e) {
			var addr = $("#addr_text").val();
			var cont = $("#addr_cont").val();
			var mobile = $("#addr_mobile").val();
			var pos = $("#pos1").val();

			if(!addr.trim() || !cont.trim() || !mobile.trim()){
				layer.msg('请输入完整的联系地址，联系人资料！');return false;
			}

			var data={id:$("#addr_id").val(),addr:addr,cont:cont,mobile:mobile,pos:pos};
		    layer.confirm('是否确认保存地址?', {
		      btn: ['Yes','No'] //按钮
		    }, function(){
		    	//submit order
				$.post('/index.php/customer/address_edit',data,function(res){
					var res =JSON.parse(res);
					if(res.code) loadAddress();
					layer.msg(res.msg);
					$("#mask").trigger('click')

				})  

		    }, function(){
		    	 layer.msg('yes!');
		     	//	return false;
		    });

		})

		//地图上选择地址
		$("#address_get").on('click',function(){

			if($("#address_input").val()){
				$("#addr_text").val($("#address_input").val());
			}

			$("#container").hide();

		})


		//edit or remove an address
		$("#address_list").on('click','.edit,.remove',function(e){

			if($(this).hasClass('edit')){
				var addr_id = $(this).parents('.row').find('.addr').attr('addr_id');
				var addr_text = $(this).parents('.row').find('.addr').text();
				var addr_cont = $(this).parents('.row').find('.cont').text();
				var addr_mobile = $(this).parents('.row').find('.mobi').text();
				//layer.msg('edit');

				$("#addr_id").val(addr_id);
				$("#addr_text").val(addr_text);
				$("#addr_cont").val(addr_cont);
				$("#addr_mobile").val(addr_mobile);
				$("#addr_editor").show();
				$("#mask").show();
			}else{
			//询问框
				var addr_id = $(this).parents('.row').find('.addr').attr('addr_id');
			    layer.confirm('是否确认删除地址?', {
			      btn: ['Yes','No'] //按钮
			    }, function(){
			    	//submit order
					$.post('/index.php/customer/address_remove',{id:addr_id},function(res){
						var res =JSON.parse(res);
						if(res.code) loadAddress();
						layer.msg(res.msg);

					})  

			    }, function(){
			    	 layer.msg('yes!');
			     	//	return false;
			    });

			}

		})
	});

</script>

</body>
</html>
